<template>
	<view>
		<view class="goods-comment" v-if="evaluateList.length>0">
			<view class="goodsCmpTit" >商品评价</view>
			<view class="commentList">
				<view class="commentBox" v-for="(row,i) in evaluateList" :key="i" v-if="i<2">
					<view class="user">
						<image class="headImg" :src='row.headImg || "../../static/image/missing-face.png"'></image>
						<view class="userInfo">
							<view class="name">
								<text>{{checkName(row.nickName)}}</text>
								<u-rate :count="5" :disabled='true' inactive-icon='star-fill'
									v-model="row.productScore" size='40' active-color='#ff5000'></u-rate>
							</view>
							<view class="tip">{{row.createTime | formatDate('-')}}</view>
							<view class="comment">{{row.comment}}</view>
							<view class="imageList" v-if="row.imageList">
								<image :src="url" v-for="(url,index) in imageList" :key="index" @click="previewPhoto"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="evaBtn" @click="handleAll"><text>全部评价</text></view>
		</view>
		<u-popup v-model="comPop" mode="left" @close='closePop' closeable>
			<view class="evaList">
				<view class="commentList">
					<view class="commentBox" v-for="(row,i) in evaluateList" :key="i" >
						<view class="user">
							<image class="headImg" :src='row.headImg || "../../static/image/missing-face.png"'></image>
							<view class="userInfo">
								<view class="name">
									<text>{{checkName(row.nickName)}}</text>
									<u-rate :count="5" :disabled='true' inactive-icon='star-fill'
										v-model="row.productScore" size='40' active-color='#ff5000'></u-rate>
								</view>
								<view class="tip">{{row.createTime | formatDate('-')}}</view>
								<view class="comment">{{row.comment}}</view>
								<view class="imageList" v-if="row.imageList">
									<image :src="url" v-for="(url,index) in imageList" :key="index" @click="previewPhoto"></image>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			goodsId: String,
		},
		data(){
			return{
				evaluateList: [
					{nickName:'tbb03',imageList:'1',comment:'好好看，和图片一模一样质量也很好',productScore:'5',createTime:'2025-3-16',headImg:'../../static/image/miss-girl.png'},
					{nickName:'唐诗宋词',comment:'客服这里推荐的尺码很合适，版型很好，实际用起来很好看',productScore:'5',createTime:'2025-3-26',},
					{nickName:'tbb03',imageList:'1',comment:'好好看，和图片一模一样质量也很好',productScore:'5',createTime:'2025-3-16',headImg:'../../static/image/miss-girl.png'},
					{nickName:'tbb03',imageList:'1',comment:'好好看，和图片一模一样质量也很好',productScore:'5',createTime:'2025-3-16',headImg:'../../static/image/miss-girl.png'},
					{nickName:'tbb03',imageList:'1',comment:'好好看，和图片一模一样质量也很好',productScore:'5',createTime:'2025-3-16',headImg:'../../static/image/miss-girl.png'},
					{nickName:'tbb03',imageList:'1',comment:'好好看，和图片一模一样质量也很好',productScore:'5',createTime:'2025-3-16',headImg:'../../static/image/miss-girl.png'},
					{nickName:'tbb03',imageList:'1',comment:'好好看，和图片一模一样质量也很好',productScore:'5',createTime:'2025-3-16',headImg:'../../static/image/miss-girl.png'},
					{nickName:'唐诗宋词',comment:'客服这里推荐的尺码很合适，版型很好，实际用起来很好看',productScore:'5',createTime:'2025-3-26',},
					{nickName:'tbb03',imageList:'1',comment:'好好看，和图片一模一样质量也很好',productScore:'5',createTime:'2025-3-16',headImg:'../../static/image/miss-girl.png'},
					{nickName:'唐诗宋词',comment:'客服这里推荐的尺码很合适，版型很好，实际用起来很好看',productScore:'5',createTime:'2025-3-26',},
					{nickName:'唐诗宋词',comment:'客服这里推荐的尺码很合适，版型很好，实际用起来很好看',productScore:'5',createTime:'2025-3-26',},
					{nickName:'唐诗宋词',comment:'客服这里推荐的尺码很合适，版型很好，实际用起来很好看',productScore:'5',createTime:'2025-3-26',},
					{nickName:'唐诗宋词',comment:'客服这里推荐的尺码很合适，版型很好，实际用起来很好看',productScore:'5',createTime:'2025-3-26',},
				],//评价列表
				comPop:false,
				imageList:[
					'https://sc.yibaow.cn/ybw/2025/04/14/2a07c7a0ce8a45dca637a190aca36575.jpg',
					'https://sc.yibaow.cn/ybw/2025/04/14/265c7a5b8faf44e8aaa7f2683c2fc319.jpg',
					'https://sc.yibaow.cn/ybw/2025/04/14/2a07c7a0ce8a45dca637a190aca36575.jpg',
					'https://sc.yibaow.cn/ybw/2025/04/14/265c7a5b8faf44e8aaa7f2683c2fc319.jpg',
				]
			}
		},
		methods:{
			handleAll(){
				this.comPop = true;
				this.$emit('openPopup','open')
			},
			closePop(){
				this.comPop = false;
				this.$emit('openPopup','close')
			},
			//查询商品评价
			getComment() {
				return
				uni.request({
					url: this.serverUrl + '/user/product/comment',
					method: 'POST',
					data: {
						pageNum: 1,
						pageSize: 20,
						productDiscountId: this.goodsId
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.evaluateList = res.data.data.list;
							this.totalCount = res.data.data.totalCount;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
			
						}
					}
				})
			},
			//昵称加密
			checkName(item) {
				if (item.length > 2) {
					var star = item.substr(0, 1)
					var end = item.substr(Number(item.length - 1), item.length)
					return star + '**' + end
				} else {
					var star = item.substr(0, 1)
					return star + '**'
				}
			},
			/* 预览照片 */
			previewPhoto(e) {
				let that = this;
				let index = 1;
				let list = that.imageList
				uni.previewImage({
					current: list[index],
					urls: list,
				});
			},
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '.', k = ' ', mh = ':') {
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month > 9 ? month : "0" + month;
				day = day > 9 ? day : "0" + day;
				h = h > 9 ? h : "0" + h;
				mm = mm > 9 ? mm : "0" + mm;
				s = s > 9 ? s : "0" + s;
				return `${year}${'年'}${month}${'月'}${day}${'日'}`;
			},
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) {
				if (!html) return;
				//控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;"');
				return newContent;
			}
		
		}
	}
</script>

<style lang="scss">
	.goodsCmpTit{
		color: #11192d;
		// font-family: PingFangSC-Semibold;
		font-size: 20px;
		font-weight: 600;
		line-height: 20px;
		margin-bottom: 15px;
	}
	.goods-comment {
		width: 100%;
		margin-top: 10px;
		.evaBtn{
			@extend %flex-align-center;
			justify-content: center;
			text{
				background: #fff;
				border: 1px solid #e2e4e6;
				border-radius: 4px;
				color: #11192d;
				font-size: 16px;
				height: 40px;
				@extend %flex-align-center;
				justify-content: center;
				letter-spacing: 0;
				line-height: 16px;
				width: 140px;
			}
			text:hover{
				background: #e2e4e6;
				cursor: pointer;
			}
		}
		
		.nullInfo {
			@extend %flex-align-center;
			flex-direction: column;
	
			image {
				width: 350px;
			}
		}
		
		.commentList {
			width: 100%;
			padding-bottom: 15px;
			.commentBox {
				margin-bottom: 15px;
				.user {
					display: flex;
					align-items: flex-start;
					.headImg {
						width: 50px;
						height: 50px;
						border-radius: 50%;
						margin-right: 15px;
					}
			
					.userInfo {
						width: calc(100% - 70px);
						padding-bottom: 10px;
						border-bottom: 1px solid #ddd;
						.name {
							@extend %flex-align-center;
							text {
								margin-right: 10px;font-weight: bold;
								color: #1c2a4b;
								font-size: 14px;
							}
						}
			
						.tip {
							color: #999;
							margin-top: 5px;
						}
			
						.comment {
							padding: 5px 0;
							color: #11192d;
							font-size: 14px;
							line-height: 20px;
						}
						.imageList{
							@extend %flex-align-center;flex-wrap: wrap;
							image{width: 98px;height: 98px;cursor: pointer;margin-right: 10px;margin-bottom: 10px;}
						}
					}
			
				}
			}
		}
	}
	.evaList{
		padding: 30px 15px 15px;
		width: 50vw;
		.commentList {
			width: 100%;
			padding-bottom: 15px;
			.commentBox {
				margin-bottom: 15px;
				.user {
					display: flex;
					align-items: flex-start;
					.headImg {
						width: 50px;
						height: 50px;
						border-radius: 50%;
						margin-right: 15px;
					}
			
					.userInfo {
						width: calc(100% - 70px);
						padding-bottom: 10px;
						border-bottom: 1px solid #ddd;
						.name {
							@extend %flex-align-center;
							text {
								margin-right: 10px;font-weight: bold;
								color: #1c2a4b;
								font-size: 14px;
							}
						}
			
						.tip {
							color: #999;
							margin-top: 5px;
						}
			
						.comment {
							padding: 5px 0;
							color: #11192d;
							font-size: 14px;
							line-height: 20px;
						}
						.imageList{
							@extend %flex-align-center;flex-wrap: wrap;
							image{width: 98px;height: 98px;cursor: pointer;margin-right: 10px;margin-bottom: 10px;}
						}
					}
			
				}
			}
		}
	}
</style>